<%@ page contentType="text/html; charset=UTF-8"%>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<p>本次需支付${order.payAmount}, 请在30秒内支付完成</p>
<button id="pay">立即支付</button>

<div id="timer" style="color:#ff0000"></div>

<script type="application/javascript">
    $("#pay").click(function() {
        $.ajax({
            url:"/pay/" + '${order.id}',
            type:"POST",
            success: function (result) {
                alert("支付成功！");
                window.location.href = '/payresult/suc' ;
            }
        })
    });
</script>

<script type="text/javascript">
    var maxtime = 30; //20秒
    function CountDown() {
        if (maxtime >= 0) {
            msg = "距离支付结束还有" +  maxtime + "秒";
            $("#timer").html(msg);
            maxtime--;
        } else {
            clearInterval(timer);
            alert("订单已超时!");
            window.location.href = '/payresult/fail' ;
        }
    }
    timer = setInterval("CountDown()", 1000);
</script>